<template>
  <div>
    <div style="display: inline-flex; margin-top: 20px">
      <el-input
        v-model="name"
        :disabled="disabled"
        :placeholder="placeholder"
        prefix-icon="el-icon-search"
        style="width: 350px; margin-right: 10px"
        clearable
        @clear="search"
        @keydown.enter.native="search"
      ></el-input>

      <el-button
        :disabled="disabled"
        icon="el-icon-search"
        type="primary"
        @click="search"
      >
        搜索
      </el-button>
    </div>

    <!--        新增-->

    <el-button type="text" @click="dialogFormVisible = true"
      >新增 Dialog</el-button
    >

    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="收费类型" :label-width="formLabelWidth">
          <el-input v-model="form.chargeType" autocomplete="off"></el-input>
        </el-form-item>

		<el-form-item label="收费价格" :label-width="formLabelWidth">
          <el-input v-model="form.chargePrice" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="咨询人数" :label-width="formLabelWidth">
          <el-input v-model="form.countNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="咨询师id" :label-width="formLabelWidth">
          <el-input v-model="form.teacherId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>

        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!--        修改-->

    <el-button type="text" @click="dialogFormVisible2 = true"
      >修改 Dialog</el-button
    >

    <el-dialog title="修改" :visible.sync="dialogFormVisible2">
      <el-form :model="form">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收费类型" :label-width="formLabelWidth">
          <el-input v-model="form.chargeType" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收费价格" :label-width="formLabelWidth">
          <el-input v-model="form.chargePrice" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="咨询人数" :label-width="formLabelWidth">
          <el-input v-model="form.countNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="咨询师id" :label-width="formLabelWidth">
          <el-input v-model="form.teacherId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>

        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

    <!--表单部分-->

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="id" width="150">
      </el-table-column>

      <el-table-column prop="chargetype" label="收费类型" width="220">
      </el-table-column>

      <el-table-column prop="chargeprice" label="收费价格" width="320">
      </el-table-column>

      <el-table-column prop="countnumber" label="咨询人数" width="320">
      </el-table-column>

      <el-table-column prop="teacherId" label="咨询师" width="120">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteVisible(scope.$index)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>



<script>
export default {
  name: "Charge",

  methods: {
    //模糊查询

    search() {
      this.axios
        .get(
          "/charge/findlike",

          {
            params: {
              name: this.name,
            },
          }
        )

        .then((resp) => {
          console.log(resp);

          const r = resp.data;

          this.tableData = r.data;

          // setTimeout(()=>{this.refresh()},500)
        });
    },

    //上传相关的

    handleRemove(file) {
      console.log(file);
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;

      this.dialogVisible = true;
    },

    handleDownload(file) {
      console.log(file);
    },

    uploadImg(resp) {
      console.log(resp.data);

      this.form.image = r.data;
    },

    handleClick(row) {
      console.log(row);
    },

    add() {
      this.axios
        .post("/charge/add", {

          id: this.form.id,
          chargetype: this.form.chargeType,

          chargeprice: this.form.chargePrice,

          countnumber: this.form.countNumber,

          teacherId: this.form.teacherId,
        })
        .then((resp) => {
          const r = resp.data;

          console.log(r);

          // this.$message.success("添加成功");
        });

      //关闭

      this.dialogFormVisible = false;
    },

    update() {
      this.axios
        .put("/charge/updata", null, {
          params: {
          id: this.form.id,
          chargetype: this.form.chargeType,

          chargeprice: this.form.chargePrice,

          countnumber: this.form.countNumber,

          teacherId: this.form.teacherId,
          },
        })
        .then((resp) => {
          const r = resp.data;

          console.log(r);

          this.$message.success("修改成功");
        });

      //关闭

      this.dialogFormVisible2 = false;
    },

    //删除

    deleteVisible(index) {
      this.form.id = this.tableData[index].id;

      //提交请求

      this.axios
        .delete("/charge/delete", {
          params: {
            id: this.form.id,
          },
        })
        .then((resp) => {
          const r = resp.data;

          console.log(r);

          this.$message.success("删除成功!");

          setTimeout(() => {
            this.refresh();
          }, 500);
        });

      // location.reload();
    },

    //

    refresh() {
      this.axios
        .get("/charge/find")

        .then((resp) => {
          const r = resp.data;

          this.tableData = r.data;
        });
    },
  },

  data() {
    return {
      dialogImageUrl: "",

      dialogVisible: false,

      disabled: false,

      dialogFormVisible2: false,

      dialogFormVisible: false,

      form: {
        id: "",

        chargeType: "",

        chargePrice: "",

        countNumber: "",

        teacherId: "",
      },

      name: "",

      // consult:{

      //     Startdate: new Data(),

      // },

      tableData: [
        {
          id: "",

          chargeType: "",

          chargePrice: "",

          countNumber: "",

          teacherId: "",
        },
      ],

      formLabelWidth: "120px",
    };
  },

  created() {
    this.refresh();
  },
};
</script>


